import './Scss/Laboratory.scss'

import { Http } from '../../../../Api'
import { useEffect, useState } from 'react'
import { ColumnDataSetUp } from './Common'
import { useRequest, useSessionStorageState, useSize } from 'ahooks'
import { Column } from '@ant-design/plots'
import { useRef } from 'react'
import { colorRgb } from '../../../../Configure/Common'

export const Laboratory001 = () => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const [temporaryData] = useSessionStorageState('temporaryData')
    const [list, setList] = useState([])

    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res =>
            setList(res.list.map(({ chineseName, dataCount }) => ({ type: chineseName, 次数: dataCount }))),
    })

    useEffect(() => {
        runAsync({ url: 'getLabStatistics' })
    }, [runAsync])

    return (
        <div className="Laboratory001">
            <div className="HomePageTitle">试验室数据</div>
            <div className="list" ref={ChartsBox}>
                {list && size && (
                    <Column {...ColumnDataSetUp(list, colorRgb(temporaryData.themeColor, 1), '次数', size, ' 次')} />
                )}
            </div>
        </div>
    )
}
